<template>
  <div class="init-root">
    <ViewHead></ViewHead>
    <div class="root-content">
      <div class="yj" style="">
        <div style="padding-left:30px;padding-top:20px;">
          <el-steps finish-status="success" :align-center="true" :active="activeIndex">
            <el-step title="免职声明" style="font-size:14px;color:#606266">
            </el-step>
            <el-step title="系统配置"></el-step>
            <el-step title="完成配置"></el-step>
          </el-steps>
        </div>
        <div v-if="activeIndex == 0" class="step-content">
          <el-row>
            <el-col :offset="8" :span="8">
              <div class="mz">
                <h1>欢迎使用<span style="color:#409eff">百百堡垒机</span>，远程就是这么简单。</h1>
              </div>
              <div class="mz">
                <h2>百百堡垒机供您免费使用，在使用过程碰到问题请及时反馈。</h2>
              </div>
              <div class="mz">
                <h2>不得利用百百堡垒机从事有关违法行为。</h2>
              </div>
            </el-col>
          </el-row>
          <div class="mz" style="text-align:center;">
            <el-button @click="onNext('down')" type="primary">同意并进入下一步</el-button>
          </div>
        </div>
        <div v-if="activeIndex == 1" class="step-content">
          <el-row>
            <el-col :offset="8" :span="8">
              <el-form label-width="100px" size="mini">
                <el-form-item label="团队名称">
                  <el-input v-model="teamName"></el-input>
                  <div style="font-size:12px; color:#606266;">团队名称会显示在平台、客户端界面上，请注意填写。</div>
                </el-form-item>
                <el-form-item label="管理员账号">
                  <el-input v-model="username"></el-input>
                  <div style="font-size:12px; color:#606266;">超级管理员登录账号，超级管理员拥有所有权限。</div>
                </el-form-item>
                <el-form-item label="管理员密码">
                  <el-input v-model="password" type="password"></el-input>
                  <div style="font-size:12px; color:#606266;">超级管理员密码，请注意填写，过于简单容易被攻击。</div>
                </el-form-item>
                <el-form-item label="确认密码">
                  <el-input v-model="password2" type="password"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <div class="mz" style="text-align:center;">
            <el-button size="mini" @click="onNext('up')">上一步</el-button>
            <el-button size="mini" @click="onSettingOK" type="primary">下一步</el-button>
          </div>
        </div>
        <div v-if="activeIndex == 2" class="step-content">
          <div style="text-align:center;">
            <h1>配置成功</h1>
            <h3>欢迎使用 百百堡垒机</h3>
            <h6>团队名称:{{this.teamName}}</h6>
            <h6>管理员账号:{{this.username}}</h6>
          </div>
          <div class="mz" style="text-align:center;">
            <el-button size="mini" @click="onSettingComplate('up')" type="primary">立即体验</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ViewHead from "~/base/ViewHead.vue";

export default {
  name: "Init",
  components: {
    ViewHead,
  },
  data() {
    return {
      activeIndex: 0,
      teamName: "",
      username: "",
      password: "",
      password2: "",
    };
  },
  methods: {
    onSettingOK() {
      if (this.checkSubmit()) {
        return;
      }
      this.utils.http(
        "post",
        "/webapi/welcome/systeminit",
        {
          teamName: this.teamName,
          username: this.username,
          password: this.$md5(this.password),
        },
        () => {
          this.onNext("down");
        }
      );
    },
    checkSubmit() {
      if (
        !this.teamName ||
        !this.username ||
        !this.password ||
        !this.password2
      ) {
        this.$notify({
          title: "参数提示",
          message: "参数请填写完整",
          type: "warning",
        });
        return true;
      }

      if (this.password.length < 5) {
        this.$notify({
          title: "参数提示",
          message: "密码长度不能小于六位",
          type: "warning",
        });
        return true;
      }

      if (this.password != this.password2) {
        this.$notify({
          title: "参数提示",
          message: "两次输入密码不一致",
          type: "warning",
        });
        return true;
      }

      return false;
    },
    onSettingComplate() {
      window.location.reload();
    },
    onNext(type) {
      if (type == "down") {
        this.activeIndex++;
      } else {
        this.activeIndex--;
      }
    },
  },
  mounted() {
    this.utils.refreshRootContentHeight();
  },
};
</script>

<style>
.init-root .yj {
  height: 100%;
  background-color: #ffffff;
}

.init-root .step-content {
  padding: 20px;
  color: #303133;
}

.init-root .step-content .mz {
  font-size: 14px;
  margin-bottom: 10px;
}

.init-root .el-form-item--mini {
  margin-bottom: 10px !important;
}
</style>